Paint the Fence 02

11/13/2019

Web Design / UI

In terms of functionalities, we are choosing to focus on the “paint from import” function, where the user can customize and import an image file of the fence and see that design translated onto the 3D model. For the past week, we have been focusing on designing this import page, since it will host the main application.

“Paint from Import” page layout.

The interface allows the user to drag and drop a file or choose from computer. Once a file is uploaded, the user can click the next button and the page will autoscroll down to the grey area mapped to the 3D model generated from their image. The page also features a back to top button and a home button in the top right hand corner.

Site Functionality

So far, the upload feature is mostly working. The user can change the texture to the appearance of the uploaded one. They can then download the three files needed to view the modified model.

Screenshot of the working upload page.

3D Model

We made some tweaks to the photogrammetry output by adjusting the mesh to create gaps between the upper and lower beams of the fence. The result can be seen below.

Refined fence.

Leave a Reply